<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<button>节流按钮</button>
	<script>
		var btn = document.querySelector('button')
		// btn.onclick = function () {}

		function fn() {
			console.log("节流函数触发")
		}
		// 保证了2秒钟执行1次，但是这个不是立即触发,这个有个好处，就是会将最后一次点击会被调用触发
		function throttle(callback, wait = 2000) {
			let timeoutid;
			return function () {
				if (!timeoutid) {
					timeoutid = setTimeout(() => {
						callback.apply(this, arguments)
						timeoutid = null;
					}, wait);
				} else {
					console.log("出于节流状态，不执行函数")
				}


			}
		}

		btn.onclick = throttle(fn)
	</script>
</body>

</html>